const $ = el => document.querySelector(el)
const gets = el => [...document.querySelectorAll(el)]

// 2.	使用promise封装xhr请求
function xhrFn(method,url){
    return new Promise((resolve,reject) =>{
        const xhr = new XMLHttpRequest()
        xhr.open(method,url,false)
        xhr.onreadystatechange = ()=>{
            if(xhr.readyState === 4){
                if(xhr.status === 200){
                    let datas = JSON.parse(xhr.responseText)
                    resolve(datas)
                }
            }else{
                reject(xhr.status)
            }
        }
        xhr.send()
    })
}
// 渲染title内容
xhrFn('get','http://zyxcl.xyz/exam_api/food')
.then(datas =>{
    console.log(datas)
    let curIndex = 0,
        history = JSON.parse(sessionStorage.getItem('history')) || []
        checked()
    $('.titles').innerHTML = datas.value.map((item,i) =>{
        return `<li class="${i === curIndex? 'active' : ''}">${item.name}</li>`
    }).join('')
    renderList()
    gets('.titles li').forEach((li,i)=>{
        li.addEventListener('click',()=>{
            $('.active').classList.remove('active')
            curIndex = i
            gets('.titles li')[curIndex].classList.add('active')
            renderList()
        })
    })
    // 封装list内容函数
    function renderList(){
        $('.content ol').innerHTML = datas.value[curIndex].list.map(it =>{
            return ` <li class="${history.indexOf(it.name)===-1?'' : 'red'}">
                        <img src="${it.imgUrl}" alt="">
                        <p>${it.name}</p>
                    </li>`
        }).join('')
        gets('.list li').forEach((li,i) =>{
            li.addEventListener('click',(e)=>{
                li.classList.toggle('red')
                if(history.indexOf(li.lastElementChild.innerHTML)===-1){
                    history.push(li.lastElementChild.innerHTML)
                }else{
                    history.splice(history.indexOf(li.lastElementChild.innerHTML),1)
                }
                sessionStorage.setItem('history',JSON.stringify(history))
                checked()
            })
           
        })        
    }
    $('.checked ').addEventListener('click',(e)=>{
        if(e.target.nodeName === 'BUTTON'){
            location.href = './详情页.html'
        }else if(e.target.nodeName === 'SPAN'){
            let val = e.target.previousElementSibling.innerHTML
            history.splice(history.indexOf(val),1)
            sessionStorage.setItem('history',JSON.stringify(history))
            checked()
            renderList()
        }
    })
    // 封装渲染选中食品的函数
    function checked(){
        if(history.length == 0){
            $('.checked ul').innerHTML = ''
            $('.checked').style.display = 'none'
            return 
        }
         $('.checked').style.display = 'block'
        $('.checked ul').innerHTML = history.map(item =>{
            return  ` <li>
                        <p>${item}</p>
                        <span>✖</span>
                    </li>`
        }).join('')
    }
})
.catch(error =>{
    console.log(error)
})

